<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帖子列表 - AgriShare</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/posts.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <i class="fas fa-seedling"></i>
                <a href="index.html">AgriShare</a>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html" class="nav-link">首页</a></li>
                <li><a href="posts.html" class="nav-link active">帖子</a></li>
                <li><a href="#" class="nav-link">专家</a></li>
                <li><a href="#" class="nav-link">关于</a></li>
            </ul>
            <div class="nav-auth">
                <a href="login.html" class="btn-login">登录</a>
                <a href="register.html" class="btn-register">注册</a>
            </div>
        </div>
    </nav>

    <!-- 页面头部 -->
    <section class="page-header">
        <div class="container">
            <h1>农业知识分享</h1>
            <p>探索最新的农业技术和经验分享</p>
        </div>
    </section>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <div class="content-layout">
                <!-- 侧边栏 -->
                <aside class="sidebar">
                    <div class="sidebar-section">
                        <h3>分类筛选</h3>
                        <ul class="category-filter">
                            <li><a href="#" class="active">全部</a></li>
                            <li><a href="#">种植技术</a></li>
                            <li><a href="#">畜牧养殖</a></li>
                            <li><a href="#">病虫害防治</a></li>
                            <li><a href="#">农业科技</a></li>
                            <li><a href="#">市场行情</a></li>
                        </ul>
                    </div>
                    
                    <div class="sidebar-section">
                        <h3>热门标签</h3>
                        <div class="tags">
                            <span class="tag">有机农业</span>
                            <span class="tag">智能农业</span>
                            <span class="tag">节水灌溉</span>
                            <span class="tag">土壤改良</span>
                            <span class="tag">病虫防治</span>
                            <span class="tag">农机设备</span>
                        </div>
                    </div>
                    
                    <div class="sidebar-section">
                        <h3>推荐专家</h3>
                        <div class="expert-list">
                            <div class="expert-item">
                                <img src="https://via.placeholder.com/50" alt="专家头像">
                                <div class="expert-info">
                                    <h4>张教授</h4>
                                    <p>农业技术专家</p>
                                </div>
                            </div>
                            <div class="expert-item">
                                <img src="https://via.placeholder.com/50" alt="专家头像">
                                <div class="expert-info">
                                    <h4>李博士</h4>
                                    <p>植物病理学家</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>

                <!-- 帖子列表 -->
                <div class="posts-section">
                    <div class="posts-header">
                        <div class="posts-controls">
                            <div class="sort-options">
                                <button class="sort-btn active">最新</button>
                                <button class="sort-btn">热门</button>
                                <button class="sort-btn">精华</button>
                            </div>
                            <a href="create-post.html" class="btn-create-post">
                                <i class="fas fa-plus"></i>
                                发布帖子
                            </a>
                        </div>
                    </div>
                    
                    <div class="posts-list">
                        <article class="post-item">
                            <div class="post-content">
                                <div class="post-header">
                                    <div class="post-author">
                                        <img src="https://via.placeholder.com/40" alt="用户头像">
                                        <div class="author-info">
                                            <h4>农业专家张三</h4>
                                            <span class="post-time">2小时前</span>
                                        </div>
                                    </div>
                                    <div class="post-category">种植技术</div>
                                </div>
                                
                                <h2 class="post-title">
                                    <a href="post-detail.html">春季小麦种植技术要点及注意事项详解</a>
                                </h2>
                                
                                <p class="post-excerpt">
                                    春季是小麦种植的关键时期，需要注意土壤准备、种子选择、播种时间等多个方面。本文将详细介绍春季小麦种植的各个环节...
                                </p>
                                
                                <div class="post-tags">
                                    <span class="tag">小麦种植</span>
                                    <span class="tag">春季农业</span>
                                    <span class="tag">种植技术</span>
                                </div>
                                
                                <div class="post-stats">
                                    <span><i class="fas fa-eye"></i> 128</span>
                                    <span><i class="fas fa-heart"></i> 24</span>
                                    <span><i class="fas fa-comment"></i> 8</span>
                                    <span><i class="fas fa-share"></i> 3</span>
                                </div>
                            </div>
                        </article>
                        
                        <article class="post-item">
                            <div class="post-content">
                                <div class="post-header">
                                    <div class="post-author">
                                        <img src="https://via.placeholder.com/40" alt="用户头像">
                                        <div class="author-info">
                                            <h4>养殖户李四</h4>
                                            <span class="post-time">5小时前</span>
                                        </div>
                                    </div>
                                    <div class="post-category">畜牧养殖</div>
                                </div>
                                
                                <h2 class="post-title">
                                    <a href="post-detail.html">生猪养殖疫病预防指南：从日常管理到应急处理</a>
                                </h2>
                                
                                <p class="post-excerpt">
                                    生猪养殖中疫病预防是关键，本文详细介绍了常见疫病的预防措施和处理方法，包括环境消毒、疫苗接种、饲料管理等方面...
                                </p>
                                
                                <div class="post-tags">
                                    <span class="tag">生猪养殖</span>
                                    <span class="tag">疫病防控</span>
                                    <span class="tag">养殖管理</span>
                                </div>
                                
                                <div class="post-stats">
                                    <span><i class="fas fa-eye"></i> 95</span>
                                    <span><i class="fas fa-heart"></i> 18</span>
                                    <span><i class="fas fa-comment"></i> 12</span>
                                    <span><i class="fas fa-share"></i> 2</span>
                                </div>
                            </div>
                        </article>
                        
                        <article class="post-item featured">
                            <div class="featured-badge">
                                <i class="fas fa-star"></i>
                                精华
                            </div>
                            <div class="post-content">
                                <div class="post-header">
                                    <div class="post-author">
                                        <img src="https://via.placeholder.com/40" alt="用户头像">
                                        <div class="author-info">
                                            <h4>科技达人王五</h4>
                                            <span class="post-time">1天前</span>
                                        </div>
                                    </div>
                                    <div class="post-category">农业科技</div>
                                </div>
                                
                                <h2 class="post-title">
                                    <a href="post-detail.html">智能农业设备在现代农业中的应用实践与效果分析</a>
                                </h2>
                                
                                <p class="post-excerpt">
                                    介绍最新的智能农业设备在实际生产中的应用效果和使用心得，包括无人机植保、智能灌溉系统、土壤监测设备等...
                                </p>
                                
                                <div class="post-tags">
                                    <span class="tag">智能农业</span>
                                    <span class="tag">农业设备</span>
                                    <span class="tag">科技应用</span>
                                </div>
                                
                                <div class="post-stats">
                                    <span><i class="fas fa-eye"></i> 256</span>
                                    <span><i class="fas fa-heart"></i> 45</span>
                                    <span class="fas fa-comment"></i> 23</span>
                                    <span><i class="fas fa-share"></i> 8</span>
                                </div>
                            </div>
                        </article>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination">
                        <button class="page-btn" disabled>
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">3</button>
                        <span class="page-dots">...</span>
                        <button class="page-btn">10</button>
                        <button class="page-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>AgriShare</h3>
                    <p>致力于打造最专业的农业知识分享平台</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系方式</h4>
                    <p><i class="fas fa-envelope"></i> info@agrishare.com</p>
                    <p><i class="fas fa-phone"></i> 400-123-4567</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 AgriShare. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script src="js/posts.js"></script>
</body>
</html>